<template>
  <Layout>
    <Header class="p0">
      <Menu mode="horizontal">
        <Submenu name="1">
          <template slot="title">
            <Icon type="ios-analytics" />
            Navigation One
          </template>
          <MenuGroup title="Item 1">
            <MenuItem name="1-1">Option 1</MenuItem>
            <MenuItem name="1-2">Option 2</MenuItem>
          </MenuGroup>
          <MenuGroup title="Item 2">
            <MenuItem name="1-3">Option 3</MenuItem>
            <MenuItem name="1-4">Option 4</MenuItem>
          </MenuGroup>
        </Submenu>
        <Submenu name="2">
          <template slot="title">
            <Icon type="ios-filing" />
            Navigation Two
          </template>
          <MenuItem name="2-1">Option 5</MenuItem>
          <MenuItem name="2-2">Option 6</MenuItem>
          <Submenu name="3">
            <template slot="title">Submenu</template>
            <MenuItem name="3-1">Option 7</MenuItem>
            <MenuItem name="3-2">Option 8</MenuItem>
          </Submenu>
        </Submenu>
        <Submenu name="4">
          <template slot="title">
            <Icon type="ios-cog" />
            Navigation Three
          </template>
          <MenuItem name="4-1">Option 9</MenuItem>
          <MenuItem name="4-2">Option 10</MenuItem>
          <MenuItem name="4-3">Option 11</MenuItem>
          <MenuItem name="4-4">Option 12</MenuItem>
        </Submenu>
      </Menu>
    </Header>
    <Layout>
      <Sider>
        <Menu theme="dark" width="auto">
          <Submenu name="1">
            <template slot="title">
              <Icon type="ios-analytics" />
              Navigation One
            </template>
            <MenuGroup title="Item 1">
              <MenuItem name="1-1">Option 1</MenuItem>
              <MenuItem name="1-2">Option 2</MenuItem>
            </MenuGroup>
            <MenuGroup title="Item 2">
              <MenuItem name="1-3">Option 3</MenuItem>
              <MenuItem name="1-4">Option 4</MenuItem>
            </MenuGroup>
          </Submenu>
          <Submenu name="2">
            <template slot="title">
              <Icon type="ios-filing" />
              Navigation Two
            </template>
            <MenuItem name="2-1">Option 5</MenuItem>
            <MenuItem name="2-2">Option 6</MenuItem>
            <Submenu name="3">
              <template slot="title">Submenu</template>
              <MenuItem name="3-1">Option 7</MenuItem>
              <MenuItem name="3-2">Option 8</MenuItem>
            </Submenu>
          </Submenu>
          <Submenu name="4">
            <template slot="title">
              <Icon type="ios-cog" />
              Navigation Three
            </template>
            <MenuItem name="4-1">Option 9</MenuItem>
            <MenuItem name="4-2">Option 10</MenuItem>
            <MenuItem name="4-3">Option 11</MenuItem>
            <MenuItem name="4-4">Option 12</MenuItem>
          </Submenu>
        </Menu>
        <Menu active-name="1-2" :open-names="['1']" width="auto">
          <Submenu name="1">
            <template slot="title">
              <Icon type="ios-analytics" />
              Navigation One
            </template>
            <MenuGroup title="Item 1">
              <MenuItem name="1-1">Option 1</MenuItem>
              <MenuItem name="1-2">Option 2</MenuItem>
            </MenuGroup>
            <MenuGroup title="Item 2">
              <MenuItem name="1-3">Option 3</MenuItem>
              <MenuItem name="1-4">Option 4</MenuItem>
            </MenuGroup>
          </Submenu>
          <Submenu name="2">
            <template slot="title">
              <Icon type="ios-filing" />
              Navigation Two
            </template>
            <MenuItem name="2-1">Option 5</MenuItem>
            <MenuItem name="2-2">Option 6</MenuItem>
            <Submenu name="3">
              <template slot="title">Submenu</template>
              <MenuItem name="3-1">Option 7</MenuItem>
              <MenuItem name="3-2">Option 8</MenuItem>
            </Submenu>
          </Submenu>
          <Submenu name="4">
            <template slot="title">
              <Icon type="ios-cog" />
              Navigation Three
            </template>
            <MenuItem name="4-1">Option 9</MenuItem>
            <MenuItem name="4-2">Option 10</MenuItem>
            <MenuItem name="4-3">Option 11</MenuItem>
            <MenuItem name="4-4">Option 12</MenuItem>
          </Submenu>
        </Menu>
      </Sider>
      <Content class="pl2">
        <Card>
          <p slot="title">表格</p>
          <a href="#" slot="extra" @click.prevent="changeLimit">
            <Icon type="ios-loop-strong"></Icon>
            Change
          </a>
          <Checkbox-group
            v-model="tableColumnsChecked"
            @on-change="changeTableColumns"
          >
            <Checkbox label="show">Show</Checkbox>
            <Checkbox label="weak">Weak</Checkbox>
            <Checkbox label="signin">Signin</Checkbox>
            <Checkbox label="click">Click</Checkbox>
            <Checkbox label="active">Active</Checkbox>
            <Checkbox label="day7">7, retained</Checkbox>
            <Checkbox label="day30">30, retained</Checkbox>
            <Checkbox label="tomorrow">The next day left</Checkbox>
            <Checkbox label="day">Day Active</Checkbox>
            <Checkbox label="week">Week Active</Checkbox>
            <Checkbox label="month">Month Active</Checkbox>
          </Checkbox-group>
          <Table :data="tableData2" :columns="tableColumns2" border></Table>
          <Button type="primary" @click="load()">加载</Button>
          <Divider>With Text</Divider>

          <pre v-highlight="code"><code></code>
          <a class="copy" ><Icon type="md-copy" /></a>
          </pre>
        </Card>
        <Card> </Card>
      </Content>
    </Layout>
  </Layout>
</template>

<script>
// import hljs from 'highlight.js'
// import Remote from '@/components/page/remote';
// import Remote from '../../components/page/remote.vue';
export default {
  layout: "empty",
  data() {
    return {
      tableData2: this.mockTableData2(),
      tableColumns2: [],
      tableColumnsChecked: [
        "show",
        "weak",
        "signin",
        "click",
        "active",
        "day7",
        "day30",
        "tomorrow",
        "day",
        "week",
        "month",
      ],
      code: "var id=2;",
      detail: null,
    };
  },
  // components: {RemoteRemote},
  created() {
    this.changeTableColumns();
    this.$api.get("http://172.21.22.129:7000/test.json").then((r) => {
      this.code = r;
      console.log("html", r, html);
    });
  },
  methods: {
    load() {},
    /** */
    mockTableData2() {
      let data = [];
      function getNum() {
        return Math.floor(Math.random() * 10000 + 1);
      }
      for (let i = 0; i < 10; i++) {
        data.push({
          name: "Name " + (i + 1),
          fav: 0,
          show: getNum(),
          weak: getNum(),
          signin: getNum(),
          click: getNum(),
          active: getNum(),
          day7: getNum(),
          day30: getNum(),
          tomorrow: getNum(),
          day: getNum(),
          week: getNum(),
          month: getNum(),
        });
      }
      return data;
    },
    getTable2Columns() {
      const table2ColumnList = {
        name: {
          title: "Name",
          key: "name",
          fixed: "left",
          width: 200,
          render: (h, params) => {
            const fav = this.tableData2[params.index].fav;
            const style =
              fav === 0
                ? {
                    cursor: "pointer",
                  }
                : {
                    cursor: "pointer",
                    color: "#f50",
                  };

            return h("div", [
              h("Icon", {
                style: style,
                props: {
                  type: fav === 0 ? "ios-star-outline" : "ios-star",
                },
                nativeOn: {
                  click: () => {
                    this.toggleFav(params.index);
                  },
                },
              }),
              h("span", " " + params.row.name),
            ]);
          },
        },
        show: {
          title: "Show",
          key: "show",
          width: 150,
          sortable: true,
        },
        weak: {
          title: "Weak",
          key: "weak",
          width: 150,
          sortable: true,
        },
        signin: {
          title: "Signin",
          key: "signin",
          width: 150,
          sortable: true,
        },
        click: {
          title: "Click",
          key: "click",
          width: 150,
          sortable: true,
        },
        active: {
          title: "Active",
          key: "active",
          width: 150,
          sortable: true,
        },
        day7: {
          title: "7, retained",
          key: "day7",
          width: 150,
          sortable: true,
        },
        day30: {
          title: "30, retained",
          key: "day30",
          width: 150,
          sortable: true,
        },
        tomorrow: {
          title: "The next day left",
          key: "tomorrow",
          width: 150,
          sortable: true,
        },
        day: {
          title: "Day Active",
          key: "day",
          width: 150,
          sortable: true,
        },
        week: {
          title: "Week Active",
          key: "week",
          width: 150,
          sortable: true,
        },
        month: {
          title: "Month Active",
          key: "month",
          width: 150,
          sortable: true,
        },
      };

      let data = [table2ColumnList.name];

      this.tableColumnsChecked.forEach((col) =>
        data.push(table2ColumnList[col])
      );

      return data;
    },
    changeTableColumns() {
      this.tableColumns2 = this.getTable2Columns();
    },
    toggleFav(index) {
      this.tableData2[index].fav = this.tableData2[index].fav === 0 ? 1 : 0;
    },
  },
};
</script>

<style lang="less">
.main {
  color: transparent;
}
pre {
  position: relative;
  code.hljs {
    background: #f7f7f7;
    border-radius: 5px;
    border: 1px solid #ddd;
    max-height: 300px;
    ol {
      list-style: decimal;
      margin: 0px 0px 0 40px !important;
      padding: 0px;
    }
    ol li {
      list-style: decimal-leading-zero;
      border-left: 1px solid #ddd !important;
      padding: 5px !important;
      margin: 0 !important;
      white-space: pre;
    }
  }
  .copy {
    position: absolute;
    width: 20px;
    height: 20px;
    right: 15px;
    top: 15px;
    display: none;
  }
  &:hover {
    .copy {
      display: inline-block;
    }
  }
}
</style>
